import React, { useState, useEffect } from 'react'

import axios from 'axios'




const Child = () => {
    // const [timerId, setTimerId] = useState(null)

    useEffect(() => {
        //  绑定一个 鼠标移动事件  定时器事件 
        window.addEventListener('mousemove', fn)


        function fn (e) {
            console.log(e.pageX, e.pageY)
        }

        window.timerId = setInterval(() => {
            console.log('定时器触发了')
        }, 1000)

        return () => {
            console.log('子组件销毁了')
            window.removeEventListener('mousemove', fn)
            clearInterval(window.timerId)

        }
    }, [])

    return (
        <div style={{ color: 'red' }}>
            <h1> 我是list的子组件</h1>

        </div>
    )
}












export default function List () {
    const [count, setCount] = useState(0)
    const [listData, setListData] = useState([])
    const [isShow, setIsShow] = useState(true)


    useEffect(() => {
        // console.log('触发');
        async function getData () {
            let res = await axios.get('https://www.escook.cn/api/cart')
            console.log(res.data)

        }

        getData()



    }, [])

    //  useEffect 的回调函数的返回函数是一个组件销毁的时候触发的一个函数 

    // useEffect(() => {


    //     return () => {

    //         alert('aaa 销毁')
    //     }
    // })


    return (
        <>

            <div>List    ----------{count}</div>

            <button onClick={() => setCount(count + 1)} > 点击</button>
            {/* <Child></Child> */}

            <hr />
            <button onClick={() => setIsShow(!isShow)} > 点击</button>
            {isShow && <Child />}
        </>

    )
}

